<template>
  <el-menu :router="true" :default-active="activeMenu" class="my-menu" :style="{ height: height + 'px' }"
    @open="handleOpen" @close="handleClose" @select="handleSelect" background-color="#545c64" text-color="#fff"
    active-text-color="#ffd04b">
    <el-menu-item index="0" route="/home/site">
      <i class="el-icon-menu"></i>
      <span slot="title">工作台</span>
    </el-menu-item>
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>客户管理</span>
      </template>
      <el-menu-item index="1-1" route="/home/khgl">客户管理</el-menu-item>
      <el-menu-item index="1-2" route="/home/khlxgl">客户类型管理</el-menu-item>
    </el-submenu>
    <el-menu-item index="2">
      <i class="el-icon-menu"></i>
      <span slot="title">导航二</span>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <i class="el-icon-document"></i>
      <span slot="title">导航三</span>
    </el-menu-item>
    <el-menu-item index="4">
      <i class="el-icon-setting"></i>
      <span slot="title">导航四</span>
    </el-menu-item>
  </el-menu>
</template>

<script>

export default {
  name: 'DEMOIndex',

  data() {
    return {
      height: 0,
      activeMenu: sessionStorage.getItem('menuIndex') ? sessionStorage.getItem('menuIndex') : '0',
    };
  },

  mounted() {
    let that = this;
    that.height = window.innerHeight;

    window.onresize = function () {
      that.height = window.innerHeight
      console.log(that);
    }

  },

  methods: {
    handleClose(index, indexPath) {
      console.log(index, indexPath);
    },
    handleOpen(index, indexPath) {
      console.log(index, indexPath);
    },
    handleSelect(index, indexPath) {
      console.log(index, indexPath);
      sessionStorage.setItem('menuIndex', index)
    }
  },
};
</script>

<style lang="less" scoped>
.my-menu {
  height: 800px;
}
</style>